<template>
  <uni-popup ref="popup" type="bottom" background-color="#fff">
    <view class="popup_box">
      <view class="title"
        >物流信息
        <text class="icon-cuo" @click="close"></text>
      </view>
      <!-- 配送状态 -->
      <view class="shipment">
        <!-- 订单物流信息 -->
        <view class="item" v-for="(item, index) in logisticsList" :key="item.id">
          <view class="message" :style="{ color: index === 0 ? '#ff3304' : '#999' }">
            {{ item.text }}
          </view>
          <view class="date">
            {{ item.time }}
          </view>
        </view>
        <!-- 用户收货地址 -->
        <view class="locate">
          <view class="user">{{
            userAddresses.receiverContact + ' ' + userAddresses.receiverMobile
          }}</view>
          <view class="address">{{ userAddresses.receiverAddress }}</view>
          <view class="date"> {{ userAddresses.createTime }}</view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const popup = ref()
const logisticsList = ref<logisticsType[]>([] as logisticsType[])
const userAddresses = ref<userAddressType>({} as userAddressType)
type userAddressType = {
  receiverContact: string
  receiverMobile: string
  receiverAddress: string
  createTime: string
}
const open = (data: logisticsType[], address: userAddressType) => {
  logisticsList.value = data
  userAddresses.value = address
  popup.value?.open()
}
const close = () => {
  popup.value?.close()
}
defineExpose({
  open,
})
</script>

<style lang="scss">
.popup_box {
  .title {
    position: relative;
    padding: 20rpx 0;
    text-align: center;
    font-weight: 700;
    .icon-cuo {
      position: absolute;
      right: 40rpx;
      color: #666;
    }
  }
}
.shipment {
  line-height: 1.4;
  padding: 0 20rpx;
  margin: 20rpx 20rpx 0;
  border-radius: 10rpx;
  background-color: #fff;

  .locate,
  .item {
    min-height: 120rpx;
    padding: 30rpx 30rpx 25rpx 75rpx;
    background-size: 50rpx;
    background-repeat: no-repeat;
    background-position: 6rpx center;
  }

  .locate {
    background-image: url(../../../static/images/address.png);

    .user {
      font-size: 26rpx;
      color: #666;
    }

    .address {
      font-size: 24rpx;
      color: #666;
    }
  }

  .item {
    background-image: url(../../../static/images/bigCar.png);
    border-bottom: 1rpx solid #eee;
    position: relative;

    .message {
      height: 70rpx;
      font-size: 26rpx;
      color: #999;
    }
  }
}
.date {
  font-size: 24rpx;
  color: #999;
}
</style>
